import React, { useEffect, useState } from 'react'
import { Card, Col, PageHeader, Row, List } from 'antd';
import axios from 'axios'
import _ from 'lodash'

export default function News() {

  const [list, setList] = useState([])

  useEffect(() => {
    axios.get("/news?publishState=2&_expand=category")
      .then(res => {
        // console.log(Object.entries(_.groupBy(res.data, item => item.category.title)));
        // 这里使用了 lodash库 的 groupBy 方法，对 res.data 进行分组操作，再使用 Object.entries() 将结果转换成具有键值对的数组
        setList(Object.entries(_.groupBy(res.data, item => item.category.label)))
      })
  }, [])

  return (
    <div style={{ width: "95%", margin: "0 auto" }}>
      <PageHeader
        className="site-page-header"
        title="全球大新闻"
        subTitle="天下事，天下闻"
      />
      <div className="site-card-wrapper">
        {/* gutter 的作用是设置间距，值为一个数组，数组中的元素分别控制上下左右的间距 */}
        <Row gutter={[16, 16]}>
          {
            list.map(item => (
              <Col span={8} key={item[0]}>
                <Card title={item[0]} bordered={true} hoverable>
                  <List
                    size="small"
                    dataSource={item[1]}
                    pagination={{
                        pageSize:3
                    }}
                    renderItem={data => {
                    //   console.log(data);
                      return <List.Item>
                        <a href={`#/detail/${data.id}`}>{data.title}</a>
                      </List.Item>
                    }}
                  />
                </Card>
              </Col>
            ))
          }
        </Row>
      </div>
    </div>
  )
}
